<template>
  <div class="data-list-container">
      <ul class="list-container">
          <li v-for="item in list" :key="item.id" class="item" >
              <div class="avatar">
            <Avatar :size="44"  :url="item.avatar"></Avatar>

              </div>
              <div class="info">
                  <h4 class="title">{{item.nickname}}</h4>
                  <div class="comment">{{item.content}}</div>
                  <div class="date">{{setDate(item.createDate,true)}}</div>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
import Avatar from '../Avatar/index.vue';
import { setDate } from '../../utils';
export default {
    components: { Avatar },
    methods:{
        setDate,
    },
    props:{
        list:{
            type:Array,
            default:()=>[],
        }
    }
    
}
</script>

<style lang="less" scoped>
@import "../../style/var.less";
.data-list-container{
    width: 100%;
    height: 100%;
    .list-container{
        padding: 20px;
        margin:0;
        li{
        position: relative;
        list-style: none;
        padding:20px 0;
        margin: 0;
        border-bottom: 1px solid  @gray;
        display: flex;
        .info{
            margin-left: 20px;
            h4{
                color:@success;
                margin: 0;
            }
            .comment{
                margin-top: 10px;
                color: @dark;
               
            }
            .date{
               position: absolute;
               font-size:12px;
               color: @gray;
               top: 25px;
               right:0;

            }
        }
       
        }
    }
}
</style>